<template>
	<div class="drawer-layout" v-loading="loading">
		<!-- Header -->
		<div class="drawer-header">详情</div>

		<!-- Body -->
		<div class="drawer-body">
			<el-form-item label="修改前">
				<div class="code-box">
					<code>{{ formatJSON(detail?.before) }}</code>
				</div>
			</el-form-item>
			<el-form-item label="修改后">
				<div class="code-box">
					<code>{{ formatJSON(detail?.after) }}</code>
				</div>
			</el-form-item>
		</div>
		<!-- Footer -->
		<div class="drawer-footer">
			<el-button @click="onCancel">取消</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {getUserLoggerDetailApi} from "@/api/modules/auth.ts";
import {LoggerModel} from "@/models/settingModel.ts";

const loading = ref(false);
const props = defineProps<{ modelValue: boolean; loggerID: number }>();
const emit = defineEmits(["update:modelValue"]);
const onCancel = () => {
	emit("update:modelValue", false);
};
const detail = ref<LoggerModel>();

const loadDetail = async () => {
	if (loading.value) return;
	loading.value = true;
	try {
		const detailData = await getUserLoggerDetailApi({id: props.loggerID});
		detail.value = detailData.data.data;
	} catch (error) {
		console.log(error);
	} finally {
		loading.value = false;
	}
};
watch(
	() => props.loggerID,
	(newVal) => {
		if (newVal && props.modelValue) {
			loadDetail();
		}
	},
	{immediate: true}
);
const formatJSON = (obj: any) => {
	try {
		return JSON.stringify(obj, null, 2);
	} catch {
		return String(obj);
	}
};
onMounted(() => {
	loadDetail();
});
</script>

<style scoped>
.drawer-layout {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.drawer-header {
	flex: 0 0 60px;
	padding: 16px 20px;
	font-size: 18px;
	font-weight: 600;
	border-bottom: 1px solid #ebeef5;
}

.drawer-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px;
}

.drawer-footer {
	flex: 0 0 64px;
	padding: 12px 20px;
	border-top: 1px solid #ebeef5;
	background: #fff;
	text-align: right;
}

.drawer-footer .el-button + .el-button {
	margin-left: 12px;
}

.code-box {
	background: #1e1e1e;
	color: #dcdcdc;
	padding: 12px;
	border-radius: 6px;
	font-family: "Fira Code", "Courier New", monospace;
	font-size: 16px;

	white-space: pre-wrap;       /* 保留换行 */
	word-break: break-word;      /* 超长单词自动换行 */
	overflow-wrap: break-word;   /* 兼容性更好 */

	max-height: 350px;
	overflow-y: auto;            /* 竖向滚动 */
	overflow-x: hidden;          /* 禁止横向滚动 */
	display: block;              /* 保证 div 或 code 是块级元素 */
}
</style>
